<template>
	<view style="">
	<view class="wrap" style="background: url(../../static/login.png) no-repeat; center">
		<view class="top"></view>
		<view class="content">
			<view class="title">欢迎注册</view>
			<view style="margin-bottom: 10rpx;border-bottom: 1px #dcdcdc solid;">
				<view>姓名</view>
				<u-input v-model="name" type="text" :border="border" placeholder="请输入姓名" />
				<!-- <input class="u-border-bottom" type="text" v-model="tel"   /> -->
			</view>
			<view style="margin-bottom: 10rpx;border-bottom: 1px #dcdcdc solid;">
				<view>身份证</view>
				<u-input v-model="idcard" type="text" :border="border" placeholder="请输入身份证" />
			</view>
			<view style="margin-bottom: 40rpx;border-bottom: 1px #dcdcdc solid;">
				<view>手机号码</view>
				<u-input v-model="tel" type="number" :border="border" placeholder="请输入手机号" />
			</view>
		
			<!-- <view class="tips">未注册的手机号验证后自动创建美团账号</view> -->
			<button @tap="submit" :style="[inputStyle]" class="getCaptcha">注册</button>
			<view class="alternative">
				<!-- <view class="password">密码登录</view>
				<view class="issue">遇到问题</view> -->
			</view>
		</view>
		<view class="buttom">
			<view class="loginType">
				<!-- <view class="wechat item">
					<view class="icon"><u-icon size="70" name="weixin-fill" color="rgb(83,194,64)"></u-icon></view>
					微信
				</view>
				<view class="QQ item">
					<view class="icon"><u-icon size="70" name="qq-fill" color="rgb(17,183,233)"></u-icon></view>
					QQ
				</view> -->
			</view>
			<view class="hint">
				登录代表同意
				<text class="link">用户协议、隐私政策，</text>
				并授权使用您的账号信息（如昵称、头像、）以便您统一管理
			</view>
		</view>
		<u-toast ref="uToast" />
		<u-modal v-model="show" :content="content" @confirm="confirm"></u-modal>
		<u-modal v-model="show1" :show-title='false'>
			<view class="slot-content"style="margin: 40rpx;">
				<view style="text-align: center;color: #007AFF;margin-bottom: 20rpx;">
					<u-icon label="申领失败" label-color='#ff3d3d' color="#ff3d3d" size="50" name="checkmark-circle-fill" label-size='40'></u-icon>
				</view>
				<rich-text :nodes="content1" style="font-size: 30rpx;"></rich-text>
			</view>
		</u-modal>
	</view>
	</view>
</template>

<script>
import {RegisterUser,openIdLogin} from "../../api/common";
export default {
	data() {
		return {
			name:'',
			idcard:'',
			tel: '',
			show:false,
			show1: false,
			content:'恭喜，已领取到了您的专属崇军码！',
			content1:''
		}
	},
	computed: {
		inputStyle() {
			let style = {};
			if(!this.name) return false
			if(!this.idcard) return false
			if(!this.tel) return false
			style.color = "#fff";
			style.backgroundColor = this.$u.color['warning'];
			return style;
		}
	},
	watch:{
		name(val){
			if(this.$u.test.chinese(val)){
				return true
			}else if(val){
			return	this.$refs.uToast.show({
					title: '请输入中文',
					type: 'error', 
				})
			}
		},
	},
	methods: {
		submit() { 
			let that = this
			if(!that.name || !that.idcard || !that.tel) return false
			if(!(that.idcard.length == 18)){	
				that.$refs.uToast.show({
					title: '请输入正确的身份证号',
					type: 'error', 
				})
				return false
			}else if(!that.$u.test.mobile(that.tel)) {
				    that.$refs.uToast.show({
						title: '请输入正确的手机号',
						type: 'error', 
					})
					return	false
			}
           uni.getStorage({
               key: 'getOpenid',
               success: function (res) {
				  RegisterUser(res.data.openid,that.name,that.idcard,that.tel).then(res1=>{
				  	if(res1.code == 0){
						openIdLogin(res.data.openid).then(resid=>{
							let use={};
							if(resid.code == 0){
								use = {
									name:resid.data["姓名"],
									idcard:resid.data["身份证号"],
									tel: resid.data["手机号"],
									idcardType: resid.data["身份类型"],
									busesNumber:  resid.data["公交次数"],
									creditRating:  resid.data["信用等级"],
									qrcode: resid.data["生成二维码权限"],
									scan: resid.data["核验二维码权限"]
								}
								uni.setStorage({
								    key: 'user',
								    data: use,
								    success: function () {
										that.show = true;
								        // console.log('success');
								    }
								});
							}
						}).catch(error=>{
							uni.showToast({
								title: error.message,
								icon:"none"
							});
						})
						 // uni.setStorageSync('storage_key', 'hello');
				  		// that.$u.route({type:'navigateBack'})
						 // that.$u.route({type:'redirectTo',url: 'pages/home/index'})
				  	}else{
						that.content1 = res1.message
						that.show1 = true
				  	}
				  }).catch(error=>{
				  	// uni.showToast({
				  	// 		title: error.message,
				  	// 		icon:"none"
				  	// });
					that.content1 = error.message
					that.show1 = true
				  })
               }
           });
		},
		confirm(){
				this.show = false;
				this.$u.route({type:'redirectTo',url: 'pages/home/index'})
		}
	}
};
</script>

<style lang="scss" scoped>
.wrap {
	// border-style: ;
	position: absolute;
	height: 100vh;
	font-size: 28rpx;
	.content {
		width: 600rpx;
		margin: 80rpx auto 0;

		.title {
			text-align: left;
			font-size: 60rpx;
			font-weight: 500;
			margin-bottom: 100rpx;
		}
		input {
			text-align: left;
			margin-bottom: 10rpx;
			padding-bottom: 6rpx;
		}
		.tips {
			color: $u-type-info;
			margin-bottom: 60rpx;
			margin-top: 8rpx;
		}
		.getCaptcha {
			background-color: rgb(253, 243, 208);
			color: $u-tips-color;
			border: none;
			font-size: 30rpx;
			padding: 12rpx 0;
			
			&::after {
				border: none;
			}
		}
		.alternative {
			color: $u-tips-color;
			display: flex;
			justify-content: space-between;
			margin-top: 30rpx;
		}
	}
	.buttom {
		.loginType {
			display: flex;
			padding: 157rpx 150rpx 150rpx 150rpx;
			justify-content:space-between;
			
			.item {
				display: flex;
				flex-direction: column;
				align-items: center;
				color: $u-content-color;
				font-size: 28rpx;
			}
		}
		
		.hint {
			padding: 20rpx 40rpx;
			font-size: 20rpx;
			color: $u-tips-color;
			
			.link {
				color: $u-type-warning;
			}
		}
	}
}
</style>
